<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        background-color="#696969"
        text-color="#f2f2f2"
        active-text-color="#ffd04b"
        :default-active="this.$route.path"
        router
      >
        <el-menu-item index="/periodictable">元素周期表</el-menu-item>
        <el-menu-item index="/birds">很多鸟</el-menu-item>
        <el-menu-item index="/ocean">海面</el-menu-item>
        <el-menu-item index="/crossfade">场景切换</el-menu-item>
        <el-menu-item index="/leaflet3D">Leaflet3D</el-menu-item>
        <el-menu-item index="/particleConversion">粒子转换</el-menu-item>
        <el-menu-item index="/particleConversionFinished">
          粒子转换废品
        </el-menu-item>
        <el-menu-item index="/fbxScarf">fbx围巾</el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<style>
.el-aside {
  background-color: #696969;
}

.el-aside ul {
  height: 100%;
  border: 0;
}

.el-main {
  position: relative;
}
</style>
